<script setup>
import {House,DataAnalysis,User} from "@element-plus/icons-vue"
import router from "@/router/index.js";
 </script>

<template>
<!--  头部开始-->
  <div style="height: 60px;background-color: #00bbff;display: flex; align-items: center;padding-left: 20px;" >
    <div style="width: 200px; display:flex; " >
      <img src="@/assets/logo.png" style="width: 40px;height: 40px;">
      <div style="align-items: center; font-size: 20px; color:white; margin-left:10px; padding-top: 5px">后台管理系统</div>


    </div>
    <div style="flex:1"></div>
    <div style="width: fit-content; display:flex; align-items: center; padding-right: 5px;" >

      <el-avatar
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />
      <span style="color: white">泳</span>
    </div>


  </div>
<!--  头部结束-->
<!--  body开始-->

  <div style="display:flex">
<!--    左侧导航菜单开始-->
    <div style="width: 200px;border-right: 1px solid #ddd ;min-height:calc(100vh - 60px)" >
      <el-menu style="border:0" router
               :default-active="router.currentRoute.value.path"
               :default-openeds="['1']">
<!--        <el-menu-item @click="router.push('/manager/home')">系统首页</el-menu-item>-->
<!--        <el-menu-item @click="router.push('/manager/data')">数据统计</el-menu-item>-->
        <el-menu-item index="/manager/home">
          <el-icon><House /></el-icon>
          系统首页</el-menu-item>
        <el-menu-item index="/manager/data"   >
          <el-icon><DataAnalysis /></el-icon>
          数据统计</el-menu-item>
        <el-sub-menu  index="1" router>
          <template #title>
            <el-icon ><User /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item  index="/manger/users/list">用户列表</el-menu-item>
          <el-menu-item   index="/manger/users/type">用户类型</el-menu-item>
        </el-sub-menu>


      </el-menu>

    </div>

<!--    左侧导航菜单结束-->
<!--    右侧主体区域开始-->
    <div style="flex: 1;width: 0; background-color: #dfd6d6">
      <RouterView/>
    </div>
<!--    右侧主体区域结束-->
  </div>
<!--  body结束-->


</template>
<style>
.el-menu-item.is-active{
  background-color: #bde1ff;
}
</style>